<template>
	<view class="container">
		<rank-pop :is-show-rank="isShowRank" :rank-num="userInfo.userRankNum"></rank-pop>
		<bottom-nav current-index="2" :rank-num="userInfo.userRankNum"></bottom-nav>
		
		<view class="info-box">
			<image class="info-bg" src="../../static/images/userCenter.jpg"></image>
			<view class="info">
				<view class="avatar-box">
					<image :src="userInfo.userAvatar"></image>
				</view>
				<view class="user-name">{{userInfo.userName}}</view>
				<view class="user-label-box">
					<view class="user-label">高三</view>
					<view class="user-label">{{userTypeList[userInfo.userSubject-1]}}</view>
				</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-item" data-index="1" @tap="tapItem">
				<view class="item-left">
					<image src="../../static/images/myOrder.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">我的订单</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
					<view class="item-line"></view>
				</view>
			</view>
			<view class="list-item" data-index="2" @tap="tapItem">
				<view class="item-left">
					<image src="../../static/images/XIE.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">意见反馈</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
					<view class="item-line"></view>
				</view>
			</view>
			<view class="list-item" data-index="3" @tap="tapItem">
				<view class="item-left">
					<image src="../../static/images/aboutUs.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">关于我们</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-box" style="margin-top: 20rpx;">
			<view class="list-item">
				<view class="item-left">
					<image src="../../static/images/userAgreement.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">用户协议</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
					<view class="item-line"></view>
				</view>
			</view>
			<view class="list-item">
				<view class="item-left">
					<image src="../../static/images/privacyAgreement.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">隐私协议</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rankPop from '../../components/rank_pop.vue'
	import bottomNav from '../../components/bottom_nav.vue'
	
	export default {
		components: { bottomNav, rankPop },
		data() {
			return {
				isShowRank: false,
				userInfo: {},
				userTypeList: ['文科综合', '理科综合']
			}
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		
		
		methods: {
			
			tapItem(e) {
				let index = e.currentTarget.dataset.index
				switch (index) {
					case '1':
						uni.navigateTo({
							url: '/pages/my_order/my_order'
						})
						break
					case '2':
					uni.navigateTo({
						url: '/pages/feedback/feedback'
					})
						break
					case '3':
						break
					default:
						break
				}
			},
			
			showRank () {
			  this.isShowRank = true
			},
			
			hideRank () {
			  this.isShowRank = false
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}
	
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.info-box {
		height: 340rpx;
	}
	
	.info-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 750rpx;
		height: 340rpx;
	}
	
	.info {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		z-index: 3;
	}
	
	.avatar-box {
		width: 120rpx;
		height: 120rpx;
		margin-top: 30rpx;
	}
	
	.avatar-box image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}
	
	.user-name {
		font-size: 32rpx;
		margin-top: 20rpx;
	}
	
	.user-label-box {
		width: 360rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	
	.user-label {
		width: 160rpx;
		height: 50rpx;
		background-color: #3066e5;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.list-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
	}
	
	.list-item {
		display: flex;
		flex-direction: row;
		font-size: 30rpx;
		color: #333333;
	}
	
	.item-left {
		width: 80rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.item-left image {
		width: 30rpx;
		height: 30rpx;
	}
	
	.item-label-box {
		width: 640rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 18rpx;
	}
	
	.item-arrow image {
		width: 24rpx;
		height: 24rpx;
	}
	
	.item-line {
		width: 640rpx;
		height: 1rpx;
		background-color: #f5f5f5;
		margin-top: 20rpx;
	}
</style>
